<ui:composition template="/templates/default.xhtml"
				xmlns="http://www.w3.org/1999/xhtml"
				xmlns:h="http://java.sun.com/jsf/html"
				xmlns:f="http://java.sun.com/jsf/core"
				xmlns:fn="http://java.sun.com/jsp/jstl/functions"
				xmlns:ui="http://java.sun.com/jsf/facelets"
				xmlns:o="http://openfaces.org/"
				xmlns:c="http://java.sun.com/jstl/core">

	<ui:param name="crud" value="#{locationCrud}" />
	
	<ui:param name="hideTabBar" value="#{flowScope != null}" />
	
	<ui:define name="listing">
		<ui:include src="list.xhtml" />
	</ui:define>

	<ui:define name="display">
	
		<h:outputText value="#{navController.breadcrumbTrail}" />	
	
	    <h1>#{msg.locationCreate}</h1>
	    <h:messages id="errors" globalOnly="true" />
	    <h:form id="form">
	        <table style="width: 100%">
	            <tr>
	                <td>
	                    <h:panelGrid columns="4">
	                    
	                    	<c:if test="#{locationIdGenerator.generated == false}" >
			                	<h:outputText value="#{msg.locationId}:" />
			                	<h:outputText />
			                 	<h:inputText id="extId" value="#{locationCrud.item.extId}" converter="#{defaultConverter}" />
								<h:message for="extId" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>  
			                </c:if>
	                    
	                        <h:outputText value="#{locationHierarchyService.lowestLevel.name}:"/>
	                        <h:outputText />
	                        <h:inputText styleClass="locationName" autocomplete="off" id="level" value="#{locationCrud.item.locationLevel.extId}"/>
	                        <h:message for="level" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
	                       
	                        <h:outputText value="#{msg.locationName}:"/>
	                        <h:outputText />
	                        <h:inputText id="locationName" value="#{locationCrud.item.locationName}" converter="#{defaultConverter}" />
	                        <h:message for="locationName" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
	
							<h:outputText value="#{msg.locationType}:"/>
	                        <img class="clickable" onclick="O$('popupWindowForLocType').showCentered();" src="#{request.contextPath}/resources/images/question.png" />
	                        <h:inputText id="locationType" value="#{locationCrud.item.locationType}" converter="#{defaultConverter}" />
	                    	<h:message for="locationType" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
	                    	
	                    	<h:outputText value="#{msg.locationLatitude}:"/>
	                        <h:outputText />
	                        <h:inputText id="latitude" value="#{locationCrud.item.latitude}" converter="#{defaultConverter}" />
	                        <h:message for="latitude" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
	                       
	                       	<h:outputText value="#{msg.locationLongitude}:"/>
	                        <h:outputText />
	                        <h:inputText id="longitude" value="#{locationCrud.item.longitude}" converter="#{defaultConverter}" />
	                        <h:message for="longitude" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
	                       
	                       	<h:outputText value="#{msg.locationAccuracy}:"/>
	                        <h:outputText />
	                        <h:inputText id="accuracy" value="#{locationCrud.item.accuracy}" converter="#{defaultConverter}" />
	                        <h:message for="accuracy" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
	                       
	                        <h:outputText value="#{msg.locationAltitude}:"/>
	                        <h:outputText />
	                        <h:inputText id="altitude" value="#{locationCrud.item.altitude}" converter="#{defaultConverter}" />
	                        <h:message for="altitude" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
	                       
	                        <h:outputText value="#{msg.fieldWorkerId}:"/>
	                        <h:outputText />
	                        <h:inputText styleClass="collectedBy" autocomplete="off" id="collectedBy" value="#{locationCrud.item.collectedBy}" converter="#{fieldWorkerExtIdConverter}"/>
	                        <h:message for="collectedBy" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>      
	                    </h:panelGrid>
	                </td>
	           	</tr>
	        </table>
	        <script>
	        	document.getElementById('form:level').focus();
	        	document.getElementById('form:extId').focus();
	        </script> 
	        <br />
	        <c:choose>
	            <c:when test="#{flowScope != null}">
	                <h:commandButton action="createLocation" value="#{msg.lblCreate}" />
	                <h:commandButton value="Cancel" immediate="true" action="cancel" />
	            </c:when>
	            <c:otherwise>
	                <h:commandButton action="#{locationCrud.create}" value="#{msg.lblCreate}"/>
	            </c:otherwise>
	        </c:choose>
	    </h:form>
	</ui:define>
</ui:composition>
